<app-input field="serviceId" [change]="data.service" [orig]="data.original">
  <mat-form-field class="textInput">
    <mat-placeholder>
      {{ placeholder() }}
    </mat-placeholder>
    <input matInput #serviceId="ngModel" name="serviceId" id="serviceId" required
           appInvalidDomain [data]="data" pattern="^\S+"
           [(ngModel)]="data.service.serviceId">
    <mat-error i18n *ngIf="data.invalidDomain">You do not have permissions to create a service for the domain entered in the service id</mat-error>
    <mat-error i18n *ngIf="!data.invalidDomain">Please remove any leading or trailing spaces from your service id.</mat-error>
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-form-field>
  <mat-icon appHelp
           i18n-matTooltip="services.form.label.serviceId"
           [matTooltip]="tooltip()">
  </mat-icon>
</app-input>
